<template>
	<view class="padding-lr bg-default">
		<!-- 导航 -->
		<view class="padding radius  light" :class="colors[random1]"  @touchstart="startMove" @touchend="endMove">
			<view class="flex">
				<view class="" @click="preDay">
					<text>前一天</text>
				</view>
				
				
				<view class="flex-sub text-center">
					<picker mode="date" @change="chooseDate">
						<view class="">
							<text class="text-bold">{{week}}</text>
						</view>
						<view class="">
							<text>{{month}} {{day}},{{year}}</text>
						</view>
					</picker>
					
				</view>
				
				<view class="" @click.stop="nextDay">
					<text>后一天</text>
				</view>
			</view>
			<!-- 图片 -->
			<view class="padding-lg">
				<view class=" h160 radius shadow"
					  :class="memory.bgImg? colors[random2] : 'flex align-center '+colors[random2]"
					  @click="chooseImage">
					<view class="flex-sub text-center"
						  v-if="!memory.bgImg">
						<view class="">
							<text class="cuIcon-pic" style="font-size: 40px;"></text>
						</view>
						<view class="text-xl">
							<text>今天的照片</text>
						</view>
					</view>
					<view  v-if="memory.bgImg" class="">
						<image class="h160 radius" :src="memory.bgImg" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 日记框 -->
			<view class="padding-sm bg-white radius">
				<view class="padding-xs text-center border-bottom">
					<text class="text-bold ">每日一记</text>
				</view>
				
				<view class="flex padding-xs border-bottom"
					  v-if="showInspire">
					<view class="flex-sub text-grey"
						  @click="getInpire">
						<text>{{inspire}}</text>
					</view>
					
					<view class="">
						<text class="cuIcon-delete" @click="hideInspire"></text>
					</view>
				</view>
				<view class="padding-xs">
					<textarea placeholder="请输入文字"  v-model="memory.content"></textarea>
				</view>
				
				<view class="flex padding-sm justify-between">
					<button class="cu-btn bg-gradual-purple round" @click="getInpire">灵感提示</button>
					<button class="cu-btn bg-gradual-orange round" @click="saveMemory">保存记忆</button>
				</view>
			</view>
			<!-- 名人名言 -->
			<view class="padding radius bg-blue light">
				<text>{{quote}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				today: new Date(),
				year:'',
				month:'',
				day:'',
				week:'',
				startData:{
					x:0,
					y:0
				},
				memory:{
					bdImg:''
				},
				inspire:'',
				showInspire:'',
				quote:'',
				random1:Math.floor(Math.random()*12),
				random2:Math.floor(Math.random()*12),
				colors:['bg-red','bg-orange','bg-yellow','bg-olive','bg-green','bg-cyan','bg-blue','bg-purple','bg-mauve','bg-pink','bg-brown','bg-grey','bg-gray','bg-white']
			}
		},
		onLoad() {
			if(uni.getStorageSync('today')){
				this.today = uni.getStorageSync('today')
			}else{
				this.today = new Date()
			}
			this.setToday(this.today);
		},
		methods: {
			//今天的时间展示
			setToday:function(date){
				this.memory = {};
				
				this.today = date;
				
				this.year = this.today.getFullYear();//this.today.getYear() 不准确
				this.month = this.util.getMonth(this.today.getMonth());
				this.day = this.today.getDate();
				this.week = this.util.getWeek(this.today.getDay());
				
				this.random1 = Math.floor(Math.random()*12)//页面背景色
				this.random2= Math.floor(Math.random()*12)//方框背景色
				
				this.getInpire();
				this.getQuote();
				this.getMemory();
			},
			// 设置日期
			chooseDate:function(e){
				console.log(e.detail.value);
				this.set_today(new Date(e.detail.value.split('-').join('/')));
			},
			//前一天
			preDay:function(){
				this.setToday(new Date(this.today.getTime()-24*60*60*1000));
			},
			//后一天
			nextDay:function(){
				this.setToday(new Date(this.today.getTime()+24*60*60*1000));
			},
			//开始移动
			startMove:function(e){
				this.startData.x = e.changedTouches[0].clientX;
				this.startData.y = e.changedTouches[0].clientY;
			},
			//结束移动
			endMove:function(e){
				let subx = e.changedTouches[0].clientX-this.startData.x;
				let suby = e.changedTouches[0].clientY-this.startData.y;
				if(subx>50){
					this.pre_day();
				}else if(subx<-50){
					this.next_day();
				}
			},
			//选择图片
			chooseImage:function(){
				uni.showLoading({
					title:'上传中'
				});
				uni.chooseImage({
					count:1,
					success: (res) => {
						uni.uploadFile({
							url: this.host + '/tool/uploadImage',
							filePath:res.tempFilePaths[0],
							name:'imgFile',
							success: (res) => {
								var result = JSON.parse(res.data);
								if(result.code==200){
									this.$set(this.memory,'bgImg',result.data.url);
									uni.hideLoading();
									this.util.toast(result.data.msg);
								}else{
									this.util.toast("上传失败");
								}
							}
						});
						}
					});
				uni.hideLoading();
			},
			//保存文本
			saveMemory:function(){
				console.log(this.memory);
				if(!uni.getStorageSync('user')){
					this.util.toast('请登录后再操作');
					return;
				}else{
					this.memory.userId = uni.getStorageSync('user').id;
					this.memory.nickname = uni.getStorageSync('user').nickname;
					this.memory.email = uni.getStorageSync('user').email;
					this.memory.createTime = this.today.getTime();
					this.memory.dt = this.util.format(this.today.getTime(),true);//yyyy-MM-dd
				}
				if(this.memory.headImage){
					
					uni.showToast({
						title:'请选择一张图片'
					});
				}else if(!this.memory.content){
					uni.showToast({
						title:'请填写内容'
					});
					return;
				}
				uni.request({
					url: this.host+'/today/insertMemory',
					header:this.util.header(),
					data:this.memory,
					method:'POST',
					success: (res) => {
						if(res.data.data.flag == 0){
							if(res.data.data.memory){
								this.memory = res.data.data.memory;
								this.util.toast("上传成功");
								setTimeout(()=>{
									this.util.to_back();
								},1500);
							}
						}
					}
				})
			},
			//获取灵感
			getInpire:function(){
				this.showInspire = true;
				uni.request({
					url:this.host+'/today/getInspire',
					header:this.util.header(),
					success:(res)=>{
						this.inspire = res.data.data;
					}
				})
			},
			getQuote:function(){
				uni.request({
					url:this.host + '/today/getQuote',
					header:this.util.header(),
					success: (res) => {
						if(res.data.data.flag == 0){
							this.quote = res.data.data.quote;
						}
					}
				})
			},
			//隐藏提示
			hideInspire:function(){
				this.showInspire = false;
			},
			getMemory:function(){
				if(uni.getStorageSync('user')){
					uni.request({
						url:this.host + '/today/getMemory',
						method:'POST',
						header:this.util.header(),
						data:{userId:uni.getStorageSync('user').id,date:this.util.format(this.today.getTime(),true)},
						success: (res) => {
							if(res.data.data.flag == 0){
								if(res.data.data.memory!=null){
									this.memory = res.data.data.memory;
								}
								
							}
						}
					})
				}
			}
	
		},
		onLoad:function(){
			if(uni.getStorageSync('today')){
				this.today = new Date(uni.getStorageSync('today'));
				console.log(this.today);
				uni.removeStorageSync('today');
			}else{
				this.today = new Date();
			}
			this.setToday(this.today);
			this.getInpire(this.today);
			this.getQuote();
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
